<template>
  <div class="chartDp" ref="chart"></div>
</template>

<script>
export default {
  name: "LevelDiagram",
  data() {
    return {
      chart: null,
      yData: [],
    };
  },
  mounted() {
    this.drawChart();
  },
  methods: {
    drawChart(data) {
      if (this.chart === null) {
        this.chart = this.echarts.init(this.$refs.chart);
      }
      const xData = [];
      let temYData = [];

      for (let index = 0; index < 60; index++) {
        xData.push(index + 1);
        temYData.push(0);
      }
      if (data !== undefined) {
        if (this.yData.length < 60) {
          this.yData.push(data);
          this.yData.forEach((item, index) => {
            temYData[index] = item;
          });
        } else {
          this.yData.shift();
          this.yData.push(data);
          temYData = [...this.yData];
        }
      }

      let option = {
        title: {
          text: "电平曲线图",
          left: "center",
        },
        tooltip: {
          trigger: "axis",
          formatter: "第{b}次数据电平值 ：{c}",
        },
        grid: {
          right: 30,
          left: 25,
          top: 50,
          bottom: 50,
        },
        xAxis: {
          name: "次", // 系列名称
          data: xData, // x 轴数据
          type: "category", // 类目
        },
        yAxis: {
          name: "电平值", // 系列名称
          type: "value",
          min: 0, // y 轴的最小值
          max: 10, // y 轴的最大值
          axisLine: {
            show: true,
          },
        },
        series: [
          {
            type: "line", // 图表类型为折线图
            data: temYData, // 系列数据
            symbol: "circle",
            symbolSize: [5, 5],
            smooth: true, // 平滑
          },
        ],
      };

      option && this.chart.setOption(option);
    },
  },
};
</script>

<style lang="scss" scoped>
// .chart {
//   width: 45%;
//   height: 260px;
//   // background-color: #8df;
// }
</style>
